<template>
  <div>
    <lu>
      <li>000</li>
      <li>111</li>
      <li>222</li>
      <li>333</li>
      <li>444</li>
    </lu>
  </div>
</template>
<script>
export default {
  created() {
    var num = 10;
    var num = 10;
    console.log(num);
    let num1 = 20;
    // let num1 = 20;
    console.log(num1);
  },
  mounted() {
    let lis = document.querySelectorAll("li");
    // var声明的全局变量是打印这个全局变量的最终值，是同一个
    for (var i = 0; i < lis.length; i++) {
      lis[i].onclick = function () {
        console.log(i);
      };
    }
    //let声明的i有块级作用域，每一次都是声明的不同i再上一次i++
    for (let i = 0; i < lis.length; i++) {
      lis[i].onclick = function () {
        console.log(i);
      };
    }
    // 闭包
    for (var i = 0; i < lis.length; i++) {
      lis[i].onclick = (function (index) {
        return function () {
          console.log(index);
        };
      })(i);
    }
    //var有声明提升
    console.log(value); //undefined
    var value = 10;

    // console.log(value1); //报错
    let value1 = 10;

    function fn() {
      console.log(iii); //undefined
      var iii = 1;
    //   console.log(ii); //"ReferenceError: Cannot access 'ii' before initialization"
      let ii = 1;
    }
    fn();
  },
};
</script>